<template>
  <div class="app-container">
    <el-button type="success" icon="el-icon-s-promotion" style="margin-bottom:5px" @click="showSend">点我去发送邮件</el-button>
    <el-row :gutter="10">
      <!-- 左侧卡片 -->
      <el-col :span="8">
        <!-- 模板列表 -->
        <el-card>
          <div slot="header" class="clearfix">
            <span>模板列表</span>
          </div>
          <div class="text item">
            <el-input v-model="configKeyWord" placeholder="请输入模板名" clearable />
            <el-form :inline="true" style="margin-top:10px">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="showTemplate">新增</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            </el-form>
            <el-table
              ref="templateTable"
              :data="templateData"
              highlight-current-row
              style="width: 100%;margin-top:10px"
              @row-click="handTemplateClick"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="bucket" label="模板名" width="width" />
              <el-table-column prop="bucket" label="邮件主题" width="width" />
            </el-table>
          </div>
        </el-card>
        <!-- 配置列表 -->
        <el-card>
          <div slot="header" class="clearfix">
            <span>配置列表</span>
          </div>
          <div class="text item">
            <el-input v-model="configKeyWord" placeholder="请输入配置名" clearable />
            <el-form :inline="true" style="margin-top:10px">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="showConfig">新增</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            </el-form>
            <el-table
              ref="configTable"
              :data="configData"
              highlight-current-row
              style="width: 100%;margin-top:10px"
              @row-click="handConfigClick"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="user" label="发送人" width="width" />
              <el-table-column prop="fromUser" label="发送邮箱" width="width" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧卡片 -->
      <el-col :span="16">
        <el-card>
          <div v-if="activeName=='send'">
            <!-- 发送部分 -->
            <el-form ref="sendForm" :model="sendForm" :rules="sendRules" style="margin-top: 6px;" size="small" label-width="100px">
              <el-form-item label="邮件标题" prop="title">
                <el-input v-model="title" style="width: 646px" placeholder="请输入邮件标题，标题不能为空" />
              </el-form-item>
              <el-form-item label="收件地址" prop="address">
                <el-input v-model="address" style="width: 646px" placeholder="请输入收件地址，多个地址英文逗号,隔开" />
              </el-form-item>
              <div ref="editor" class="editor" />
              <Email style="margin-left:28px;margin-bottom:10px" />
              <el-button :loading="loading" style="margin-left:28px;margin-bottom: 30px" size="medium" type="primary" @click="doSubmit">发送邮件</el-button>
            </el-form>
          </div>
          <div v-else-if="activeName=='template'">
            <!-- 模板部分 -->
            <el-form ref="templateForm" :model="templateForm" :rules="templateRules" style="margin-top: 6px;" size="small" label-width="100px">
              <el-form-item label="模板名称" prop="name">
                <el-input v-model="name" style="width: 646px" placeholder="请输入模板名称，模板名称不能为空" />
              </el-form-item>
              <el-form-item label="邮件标题" prop="title">
                <el-input v-model="title" style="width: 646px" placeholder="请输入邮件标题，标题不能为空" />
              </el-form-item>
              <div ref="editor" class="editor" />
              <Email style="margin-left:28px;margin-bottom:10px" />
              <el-button :loading="loading" style="margin-left:28px;margin-bottom: 30px" icon="el-icon-check" size="medium" type="primary" @click="saveTemplate">保存模板</el-button>
            </el-form>
          </div>
          <div v-else>
            <!-- 邮件配置 -->
            <el-form ref="configForm" :model="configForm" :rules="configRules" style="margin-top: 6px;" size="small" label-width="100px">
              <el-form-item label="发件人邮箱" prop="fromUser">
                <el-input v-model="configForm.fromUser" style="width: 40%" />
                <span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>
              </el-form-item>
              <el-form-item label="发件用户名" prop="user">
                <el-input v-model="configForm.user" style="width: 40%;" />
                <span style="color: #C0C0C0;margin-left: 10px;">Sender username</span>
              </el-form-item>
              <el-form-item label="邮箱密码" prop="pass">
                <el-input v-model="configForm.pass" type="password" style="width: 40%;" />
                <span style="color: #C0C0C0;margin-left: 10px;">email Password</span>
              </el-form-item>
              <el-form-item label="SMTP地址" prop="host">
                <el-input v-model="configForm.host" style="width: 40%;" />
                <span style="color: #C0C0C0;margin-left: 10px;">SMTP address</span>
              </el-form-item>
              <el-form-item label="SMTP端口" prop="port">
                <el-input v-model="configForm.port" style="width: 40%;" />
                <span style="color: #C0C0C0;margin-left: 10px;">SMTP port</span>
              </el-form-item>
              <el-form-item label="">
                <el-button :loading="loading" size="medium" type="primary" icon="el-icon-check" @click="saveConfig">保存配置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Config from '@/settings'
import Email from '@/components/Email'
export default {
  name: 'EmailManage',
  components: { Email },
  data() {
    return {
      activeName: 'template', // 右侧切换标志 send 发邮件 template 模板 config 配置
      configForm: {
        id: undefined, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: ''
      },
      templateForm: {
        id: undefined, name: '', title: '', content: ''
      },
      configRules: {
        fromUser: [
          { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        user: [
          { required: true, message: '请输入发件用户名', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        host: [
          { required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
        ],
        port: [
          { required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
        ]
      },
      templateRules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入邮件标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入邮件内容', trigger: 'blur' }
        ]
      },
      sendRules: {
        address: [
          { required: true, message: '请输入发送邮箱', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入邮件标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入邮件内容', trigger: 'blur' }
        ]
      },
      configKeyWord: '',
      configData: [],
      templateKeyWord: '',
      templateData: []
    }
  },
  mounted() {
    this.initConfigList()
    this.initTemplateList()
  },
  methods: {
    async initConfigList() {
      const result = await this.$API.emailConfig.pageQuery(this.configKeyWord)
      if (result.code === 200) {
        this.configData = result.data
      }
    },
    async initTemplateList() {
      const result = await this.$API.emailTemplate.pageQuery(this.templateKeyWord)
      if (result.code === 200) {
        this.templateData = result.data
      }
    },
    showConfig() {
      this.configForm = {
        id: undefined, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: ''
      }
      this.clearAllValidate()
      this.activeName = 'config'
    },
    showTemplate() {
      this.clearAllValidate()
      this.activeName = 'template'
    },
    showSend() {
      this.clearAllValidate()
      this.activeName = 'send'
    },
    saveConfig() {
      this.$refs.configForm.validate(async valid => {
        if (valid) {
          let code
          const { configForm } = this
          if (configForm.id) {
            const result = await this.$API.emailConfig.updateEmailConfig(configForm)
            code = result.code
          } else {
            const result = await this.$API.emailConfig.createEmailConfig(configForm)
            code = result.code
          }
          if (code === 200) {
            this.dialogFormVisible = false
            this.$message({
              message: '保存成功',
              type: 'success',
              showClose: true,
              duration: Config.duration
            })
          } else {
            this.$message({
              message: '保存失败',
              type: 'error',
              showClose: true,
              duration: Config.duration
            })
          }
          this.initConfigList()
        }
      })
    },
    handTemplateClick() {

    },
    handConfigClick() {

    },
    saveTemplate() {

    },
    clearAllValidate() {
      this.$nextTick(() => this.$refs.sendForm.clearValidate())
      this.$nextTick(() => this.$refs.configForm.clearValidate())
      this.$nextTick(() => this.$refs.templateForm.clearValidate())
    }
  }
}
</script>

<style>

</style>
